<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">{{Lang.lang('我的')}}</view>
			<view class="service iconfont icon-zaixiankefu" data-url="/pages/index/ruleV?type=kefu" @click="gotopage">
			</view>
			<view class="message iconfont icon-tongzhi" data-url="/pages/index/tidings" @click="gotopage">
				<view class="round" v-if="is_message_read==1"></view>
			</view>
			<picker @change="choiceLang" :value="langIndex" :range="Lang.lang('langData')" :range-key="'name'">
				<view class="language" v-if="lang == 'en'">EN</view>
				<view class="language" v-else>CN</view>
			</picker>
		</view>
		<view class="clear_box"></view>

		<view class="page_content">
			<view class="my_box">
				<view class="avatar">
					<image src="../../static/tx01.png" mode="scaleToFill"></image>
				</view>
				<view class="text_box">
					<view class="name">{{Lang.lang('錢包地址')}}：{{user_info.address}}</view>
					<view class="num">ID:{{user_info.userid}}</view>
					<view class="standing">
						<view class="other">Lv {{user_info.agent_lv}}</view>

						<view class="other" v-if="user_info.network_lv == 1">{{Lang.lang('市代')}}</view>
						<view class="other" v-if="user_info.network_lv == 2">{{Lang.lang('省代')}}</view>
						<view class="other" v-if="user_info.network_lv == 3">{{Lang.lang('國代')}}</view>
					</view>
				</view>
				<!-- <view class="copy iconfont icon-fuzhi" @tap="copyText"></view> -->
			</view>

			<view class="assets_box">
				<view class="menu_box">
					<view class="menu" data-url="/pages/personalcenter/assets" @click="gotopage">
						<view class="icon">
							<image src="../../static/menu/menu08.png" mode="widthFix"></image>
						</view>
						<view class="text">{{Lang.lang('我的資產')}}</view>
					</view>
					<view class="menu" data-url="/pages/mall/order/order" @click="gotopage">
						<view class="icon">
							<image src="../../static/menu/menu09.png" mode="widthFix"></image>
						</view>
						<view class="text">{{Lang.lang('商城訂單')}}</view>
					</view>
					<view class="menu" data-url="/pages/personalcenter/team" @click="gotopage">
						<view class="icon">
							<image src="../../static/menu/menu10.png" mode="widthFix"></image>
						</view>
						<view class="text">{{Lang.lang('我的團隊')}}</view>
					</view>
				</view>
			</view>

			<view class="list_box">
				<block v-for="(item, index) in list" :key="index">
					<view class="list" :data-url="item.url" @click="gotopage02">
						<view class="icon iconfont" :class="item.icon"></view>
						<view class="title">
							<span v-if="lang=='tc'">{{item.title_tc}}</span>
							<span v-if="lang=='en'">{{item.title_en}}</span>
						</view>
						<view class="arrow iconfont icon-xiangyou1"></view>
					</view>
				</block>



				<a class="list" :href="config_index_show_cfg_bps" target="_blank">
					<view class="icon iconfont icon-baipishu"></view>
					<view class="title">{{Lang.lang('白皮書')}}</view>
					<view class="arrow iconfont icon-xiangyou1"></view>
				</a>


			</view>

		</view>

		<!-- 输入安全码 -->
		<!-- <view class="pupu_box" v-if="pupu" @tap="autoPupu">
			<view class="show_box" @tap.stop="">
				<view class="title">商城對接</view>
				<view class="input">
					<input type="password" value="" placeholder="請輸入唯一碼" />
				</view>
				<view class="menu_box">
					<view class="menu" @tap="autoPupu">取消</view>
					<view class="menu">確認綁定</view>
				</view>
			</view>
		</view> -->


	</view>
</template>

<script>
	export default {
		data() {
			return {
				pupu: false,
				lang: 'en',
				langIndex: '',
				link: '',
				scrrol: false,
				info: '',
				list: [{
						url: '/pages/personalcenter/publish/publish',
						icon: 'icon-fabu_mian24',
						title_tc: '我的發布',
						title_en: 'My Posts',
					},
					{
						url: '/pages/personalcenter/publish/records',
						icon: 'icon-dingdan',
						title_tc: '購買記錄',
						title_en: 'Purchase records',
					},
					// {
					// 	url: 'Malldocking',
					// 	icon: 'icon-lianjie',
					// 	title: '商城對接',
					// },
					{
						url: '/pages/guess/records',
						icon: 'icon-jingcai',
						title_tc: '競猜記錄',
						title_en: 'Guessing records',
					},
					{
						url: '/pages/personalcenter/share',
						icon: 'icon-a-yaoqinghaoyou1',
						title_tc: '邀請好友',
						title_en: 'Invite friends',
					},
					// {
					// 	url: '/pages/personalcenter/cipher',
					// 	icon: 'icon-mima',
					// 	title: '交易密碼',
					// },
					// {
					// 	url: '/pages/personalcenter/',
					// 	icon: 'icon-baipishu',
					// 	title: '白皮書',
					// },
					{
						url: '/pages/personalcenter/set',
						icon: 'icon-xitongshezhi',
						title_tc: '系統設置',
						title_en: 'System settings',
					},
				],
				is_message_read: 0,
				user_info: {
					address: '',
					agent_lv: 0,
					network_lv: 0

				},
				config_index_show_cfg_bps: ''

			}
		},
		onLoad() {

		},
		onShow() {
			this.setMenuLang();
			this.lang = uni.getStorageSync('_language');
			this.loadData()
		},
		methods: {
			loadData() {
				let that = this;
				that.Net._post('api/user/getUserInfo', {}, res => {
					if (res.code == 200) {
						that.is_message_read = res.data.is_message_read
						that.user_info = res.data.user_info
						that.config_index_show_cfg_bps = res.data.config_index_show_cfg_bps

					}
				});
			},
			autoPupu() {
				let that = this;
				that.pupu = !that.pupu;
			},
			setMenuLang() {
				let that = this;
				uni.setTabBarItem(this.Lang.lang('indexMenu')[0]);
				uni.setTabBarItem(this.Lang.lang('indexMenu')[1]);
				uni.setTabBarItem(this.Lang.lang('indexMenu')[2]);
				uni.setTabBarItem(this.Lang.lang('indexMenu')[3]);
				uni.setTabBarItem(this.Lang.lang('indexMenu')[4]);
			},
			choiceLang: function(e) {
				let that = this;
				that.langIndex = e.target.value
				let lang = that.Lang.lang('langData')[that.langIndex].type;
				that.lang = lang;
				uni.setStorageSync('_language', lang);
				// that.setMenuLang();
				location.reload()
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
			gotopage02(e) {
				let that = this;
				let url = e.currentTarget.dataset.url;
				if (url == 'Malldocking') {
					that.pupu = !that.pupu;
				} else {
					uni.navigateTo({
						url: url
					});
				}

			},
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
	}
</script>

<style>
	.scrrolHeader {
		width: 100%;
		background-color: #1A1A1A !important;

	}

	.page_content {
		width: 92%;
		margin: 0 auto;
	}

	.my_box {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 4vw;
	}

	.my_box .avatar {
		width: 24vw;
		height: 24vw;
		border-radius: 50%;
		margin-right: 2vw;
	}

	.my_box .avatar image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.my_box .copy {
		font-size: 4.5vw;
		color: #fff;
	}

	.my_box .text_box {
		width: calc(100% - 26vw);
	}

	.my_box .text_box .name {
		font-size: 5.5vw;
		color: #fff;
		font-weight: bold;
		white-space: nowrap;
		width: 90%;
		box-sizing: border-box;
		overflow: hidden;
		overflow-x: auto;
		/* display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden; */
	}

	.my_box .text_box .num {
		font-size: 3.2vw;
		color: #BDBDBD;
		margin-top: 0.8vw;
	}

	.my_box .text_box .standing {
		margin-top: 2vw;
		display: flex;
		align-items: center;
	}

	.my_box .text_box .standing .other {
		height: 7vw;
		line-height: 7vw;
		padding: 0 3vw;
		border-radius: 2vw;
		text-align: center;
		box-sizing: border-box;
		font-size: 3vw;
	}

	.my_box .text_box .standing .other:nth-child(1) {
		background-color: #2B2B2B;
		color: #fff;
	}

	.my_box .text_box .standing .other:nth-child(2) {
		border: 1px solid #fff;
		color: #fff;
		margin-left: 2vw;
	}

	.assets_box {
		width: 100%;
		margin-top: 6vw;
	}

	.assets_box .title_box {
		width: 100%;
		display: flex;
		align-items: center;
		background-color: #EEC67F;
		height: 13.5vw;
		border-radius: 3vw 3vw 0 0;
		padding: 0 4vw;
	}

	.assets_box .title_box .title {
		font-size: 4.5vw;
		color: #333;
		flex: 1;
		font-weight: bold;
	}

	.assets_box .title_box .icon {
		width: 24vw;
		margin-top: 3vw;
	}

	.assets_box .title_box .icon image {
		width: 100%;
		display: block;
	}

	.menu_box {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 5vw 0;
		background-color: #1A1A1A;
		border-radius: 4vw;
	}

	.menu_box .menu {
		flex: 1;
	}

	.menu_box .menu .icon {
		width: 10vw;
		margin: 0 auto;
	}


	.menu_box .menu .text {
		font-size: 3.5vw;
		color: #fff;
		text-align: center;
		margin-top: 2vw;
	}

	.list_box {
		width: 100%;
		padding: 0;
		border-radius: 3vw;
		margin-top: 4vw;
	}

	.list_box .list {
		height: 15vw;
		display: flex;
		align-items: center;
	}

	.list_box .list .icon {
		width: 12vw;
		height: 12vw;
		border-radius: 50%;
		background-color: #1A1A1A;
		font-size: 5.5vw;
		color: #fff;
		margin-right: 5vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.list_box .list:nth-child(1) .icon {
		color: #225CFA;
	}

	.list_box .list:nth-child(2) .icon {
		color: #CC573D;
	}

	.list_box .list:nth-child(3) .icon {
		color: #58A658;
	}

	.list_box .list:nth-child(4) .icon {
		color: #E8AC4C;
	}

	.list_box .list:nth-child(5) .icon {
		color: #CC573D;
	}

	.list_box .list:nth-child(6) .icon {
		color: #7752EC;
	}

	.list_box .list:nth-child(7) .icon {
		color: #5E9DA8;
	}

	.list_box .list:nth-child(8) .icon {
		color: #56A056;
	}

	.list_box .list .title {
		font-size: 4vw;
		color: #fff;
		flex: 1;
		font-weight: bold;
	}

	.list_box .list .arrow {
		font-size: 4vw;
		color: #BABABA;
	}

	.pupu_box {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pupu_box .show_box {
		width: 70%;
		background-color: #2B2B2B;
		border-radius: 3vw;
		padding: 5vw 0 0 0;
		position: relative;
	}

	.pupu_box .show_box .title {
		width: 100%;
		text-align: center;
		font-size: 4vw;
		color: #fff;
		font-weight: bold;
		margin-bottom: 5vw;
	}

	.pupu_box .show_box .input {
		width: 84%;
		margin: 0 auto;
		background-color: #222222;
		border-radius: 2vw;
	}

	.pupu_box .show_box .input input {
		width: 100%;
		height: 12vw;
		line-height: 12vw;
		font-size: 3.5vw;
		color: #fff;
		text-align: center;
	}

	.pupu_box .show_box .menu_box {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 5vw;
	}

	.pupu_box .show_box .menu_box .menu {
		flex: 1;
		height: 12vw;
		line-height: 12vw;
		font-size: 3.8vw;
		text-align: center;
	}

	.pupu_box .show_box .menu_box .menu:nth-child(1) {
		border-radius: 0 0 0 3vw;
		background-color: #414141;
		color: #fff;

	}

	.pupu_box .show_box .menu_box .menu:nth-child(2) {
		border-radius: 0 0 3vw 0;
		color: #fff;
		background-color: #0155FF;
	}

	a {
		color: #fff;
		text-decoration: none;
	}
</style>